import React, { useState, useEffect } from 'react';
import { RightOutlined } from '@ant-design/icons';
import classnames from 'classnames';
import './index.less';

const stepArr: StepItemType[] = [
  { label: '策略制定', value: '1' },
  { label: '申报执行', value: '2' },
];

const Step: React.FC<IStepProps> = (props) => {
  const clickItem = (v: StepItemType) => {
    props.onChange && props.onChange(v.value);
  };

  return (
    <div className="step">
      {stepArr.map((v, i) => {
        return (
          <div
            className={classnames('step-item', { active: props.value === v.value })}
            key={v.value}
            onClick={() => clickItem(v)}
          >
            <div className="left">
              <div className="num">{v.value}</div> {v.label}
            </div>
            {stepArr.length - 1 !== i && (
              <div className="right">
                <RightOutlined />
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
};

export interface StepItemType {
  value: string | number;
  label: string;
}

interface IStepProps {
  value: string | number;
  onChange?: (value: StepItemType['value']) => void;
}

export default Step;
